<template>
    <div class="kind column">
        <h1 class="page-title">选影视</h1>
        <div class="row tag1-list">
            <span class="tag1"
                @click="selectItem1(item)"
                :class="{'selecteditem':selectedKind1===item}"
                v-for="(item, index) in kindList"
                :key="index">{{item}}</span>
        </div>
        <div class="row tag1-list">
            <span class="tag1"
                @click="selectItem2(item)"
                :class="{'selecteditem':selectedKind2===item}"
                v-for="(item, index) in kindList"
                :key="index">{{item}}</span>
        </div>
        <div class="row tag1-list">
            <span class="tag1"
                @click="selectItem3(item)"
                :class="{'selecteditem':selectedKind3===item}"
                v-for="(item, index) in kindList"
                :key="index">{{item}}</span>
        </div>
        <div class="row tag1-list">
            <span class="tag1"
                @click="selectItem4(item)"
                :class="{'selecteditem':selectedKind4===item}"
                v-for="(item, index) in kindList"
                :key="index">{{item}}</span>
        </div>
        <div class="row tag1-list">
            <span class="tag1"
                @click="selectItem5(item)"
                :class="{'selecteditem':selectedKind5===item}"
                v-for="(item, index) in kindList"
                :key="index">{{item}}</span>
        </div>
        <div class="movie row">
            <MovieBaseBox v-for="(item, index) in 24"
                :key="index"
                :info="commentInfo"></MovieBaseBox>
        </div>
        <div class="bottom">
            <img src="../assets/img/bottom-img1.jpg"
                alt="">
        </div>
    </div>
</template>
<script>
import MovieBaseBox from "@/components/MovieBaseBox"
export default {
    name: "kind",
    components: {
        MovieBaseBox
    },
    data() {
        return {
            commentInfo: {
                movieName: "蜘蛛侠:平行宇宙",
                imgUrl: require("../assets/img/card.jpg"),
                imgNumber: 3.5,
                comment:
                    "很多人说用mv的方式拍摄不好，观影体验差，那你们有没有想过，这些小朋友们在拍摄的时候，心里该会有多么的开心，换个角度想想吧 - 霍灵轩的短评",
                auth: "霍灵轩",
                title: "深藏于心的那份青涩"
            },
            selectedKind1: "全部类型",
            selectedKind2: "全部类型",
            selectedKind3: "全部类型",
            selectedKind4: "全部类型",
            selectedKind5: "全部类型",
            kindList: [
                "全部类型",
                "美剧",
                "影剧",
                "韩剧",
                "日剧",
                "国产剧",
                "港剧",
                "日本动画",
                "综艺",
                "纪录片",
                "韩国",
                "日本",
                "动作",
                "喜剧",
                "爱情",
                "科幻",
                "悬疑",
                "恐怖",
                "动画"
            ]
        }
    },
    methods: {
        /**
         * 选择电影类型
         */
        selectItem1(item) {
            this.selectedKind1 = item
        },
        /**
         * 选择电影类型
         */
        selectItem2(item) {
            this.selectedKind2 = item
        },
        /**
         * 选择电影类型
         */
        selectItem3(item) {
            this.selectedKind3 = item
        },
        /**
         * 选择电影类型
         */
        selectItem4(item) {
            this.selectedKind4 = item
        },
        /**
         * 选择电影类型
         */
        selectItem5(item) {
            this.selectedKind5 = item
        }
    }
}
</script>

<style lang="less" scoped>
    .kind {
        margin-top: 30px;
        .tag1-list {
            flex-wrap: wrap;
            width: 65%;
            min-width: 850px;
            margin-bottom: 15px;
            .tag1 {
                display: inline-block;
                zoom: 1;
                cursor: pointer;
                padding: 1px 10px;
                margin: 0 3px 5px 0;
                color: #666;
                font-size: 14px;
                border-radius: 2px;
            }
            .selecteditem {
                background: #4b8ccb;
                color: #fff;
            }
        }
        .movie {
            margin-left: -15px;
            width: 65%;
            min-width: 900px;
            flex-wrap: wrap;
        }
        .bottom {
            width: 100%;
            height: 110px;
        }
    }
</style>
